<template>
    <p>
        <input type="text" v-model="TextInput" @keyup.enter="additem" placeholder="添加事项">
    </p>
    <ul>
        <p>未完成 </p>
        <template v-for="item in datalist" :key="item.id">
            <li v-if="item.status === 'left'">
                <input type="checkbox" @click="moveto(item.id)" v-model="item.checked">
                {{ item.name}}
                <button @click="datalist.splice(datalist.indexOf(item), 1)">x</button>
            </li>
        </template>
        <p v-show="datalist.filter(item => !item.checked).length === 0">暂无代办事项</p>
    </ul>
    <hr>
    <hr>
    <ul>
        <p>已完成</p>
        <template v-for="item in datalist" :key="item.id">
            <li v-if="item.status === 'right'">
                <input type="checkbox" @click="moveto(item.id)" v-model="item.checked">
                {{ item.name}}
                <button @click="datalist.splice(datalist.indexOf(item), 1)">x</button>
            </li>
        </template>
        <p v-show="datalist.filter(item => item.checked).length === 0">暂无代办事项</p>
    </ul>
    <hr>
    <ym></ym>
</template>
<script>
import ym from './ym.vue'
export default {
    components: {
        ym
    },
    data() {
        return {
            TextInput: '',
            datalist: [
                { id: 1, value: '吃饭', name: '吃饭', status: 'left', checked: false },
                { id: 2, value: '睡觉', name: '睡觉', status: 'left', checked: false},
                { id: 3, value: '喝水', name: '喝水', status: 'left', checked: false},
                { id: 4, value: '开会', name: '开会', status: 'left', checked: false},
            ]
        }
    },
    methods: {
        moveto(id) {
            this.datalist = this.datalist.map(item => {
                if (item.id === id) {
                    item.status = item.status  == 'right' ? 'left' : 'right';
                    item.checked = !item.checked;
                }
                return item
            })
        },
        additem() {
            if (this.TextInput){
                this.datalist.push({id: this.datalist.length + 1, value: this.TextInput, name:this.TextInput, status: 'left', checked: false});
                console.log(this.datalist);
                
                this.TextInput = '';
            }
            
        }
    },
}
</script>